<template>
  <div>
    <div class="tag" style="display: flex;justify-content: space-between;padding: 9px">
      <!--      所有分类-->
      <el-popover
        width="650"
        placement="bottom-start"
        trigger="click">
        <el-row :gutter="12"
                style="width: 600px;">
<!--          全部视频按钮独立写-->
          <el-col :span="1"
            style="width: 90px;margin: 10px 5px;text-align: center;cursor: pointer">
            <span @click="allVideoBtn">全部视频</span>
<!--            其他按钮-->
          </el-col>
          <el-col :span="6"
                  class="col"
                  style="width: 90px;
                         margin: 10px 5px;
                         text-align: center;
                         cursor: pointer"
                  v-for="(item, index) in categoryies"
                  :key="index">
            <div class="grid-content bg-purple"
                 :class="{active:clickedTag === item}"
                 @click="tagClick(item, index)">
              {{item.name}}
            </div>
          </el-col>
        </el-row>
        <el-button type="info" plain slot="reference">{{defaultTag}} ></el-button>
      </el-popover>
      <!--      热门标签-->
      <div class="hot-tags">
        <span class="hot_tags_item"
              :class="{active:clickedTag === item.name}"
              @click="tagClick(item)"
              v-for="(item, index) in hotTags"
              :key="index">
          {{item.name}}
        </span>
      </div>
    </div>
    <div
      class="video-list"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
      :infinite-scroll-distance="300"
      :infinite-scroll-immediate="false"
    >
      <div class="video">
        <div v-for="(item, index) in videoList"
             :key="index"
             class="itemInfo"
        >
          <img v-lazy="item.data.coverUrl" alt="" @click="goMvDetail(item)">
          <div class="playCount">
            <img style="width: 20px;height:20px;position: relative;top: -4px;" src="~@/assets/img/home/play-m.svg" alt="" >
            <div>{{ (item.data.playTime/10000).toFixed()}}</div>
            <span>万</span>
          </div>
          <div class="duration">{{item.data.durationms | duration}}</div>
          <p>{{item.data.title}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {video} from "@/network/video";
  import {format} from "@/components/common/utilis";

  export default {
    name: "Video",
    data() {
      return {
        categoryies: [], //全部分类
        hotTags: [],        //热门标签
        defaultTag: '全部视频',
        currentPage: 0,      //当前页
        clickedTag: '',      //当前被选中的标签
        disabled: true,      //无限滚动是否可用
        hasMore: true,       // 是否还有更多视频数据
        videoList:[],        //视频数据
      }
    },
    filters:{
      // 格式化歌曲时间
      duration(value){
        return format(value/1000)
      },
    },
    created(){
      //获取视频所有分类
      this.getVideoCate()
      //获取视频右边标签
      this.getVideoTags()
      //获取全部视频
      this.getAllVideo()
    },
    methods:{
      //方法
      allVideoBtn(){
        this.defaultTag = '全部视频'
        this.clickedTag = '全部视频'
        this.videoList = []
        this.getAllVideo(this.currentPage * 8)
      },
      tagClick(item, index){
        // 1.请求对应标签的视频数据
        this.defaultTag = item.name ? item.name : item
        this.videoList = []
        this.getTagVideo(this.defaultTag.id, this.currentPage * 8)
        // 2.选中的标签加上.active类名(两个地方的标签名字的获取方式不一样,左边标签直接是item,右边是item.name)
        this.clickedTag = item.name ? item.name : item
      },
      //跳转到视频详情页面
      goMvDetail(item){
        this.$router.push('/videodetail/id=' + item.data.vid)
      },
      // 上拉触底触发滚动
      load() {
        if(this.defaultTag === '全部视频'){
          this.getAllVideo(this.currentPage * 8)
        }else {
          this.getTagVideo(this.defaultTag.id, this.currentPage * 8)
        }
        // 触发load后加载数据 期间不允许再次触发load事件
        this.disabled = true;
      },


      //获取视频所有分类
      getVideoCate(){
        video.getVideoCate().then(res => {
          this.categoryies = res.data.data
        })
      },
      //获取视频右边标签
      getVideoTags(){
        video.getVideoTags().then(res => {
          this.hotTags = res.data.data
        })
      },
      //获取全部视频(似乎请求里有循环要用async进行同步请求)
      async getAllVideo(offset){
        let i = 2;
        while (i) {
          if (this.hasMore) {
            let res = await video.getAllVideo(offset)
            this.hasMore = res.data.hasmore;
            this.videoList.push(...res.data.datas);
            this.currentPage += 1;
            i--;
          } else {
            return;
          }
        }
      },
      //获取对应标签视频
      async getTagVideo(id, offset){
        let i = 2
        while (i){
          if(this.hasMore){
            let res = await video.getTagVideo(id, offset)
            this.hasMore = res.data.hasmore;
            this.videoList.push(...res.data.datas);
            this.currentPage += 1;
            i--;
          }else return
        }
        console.log(this.videoList);
      },
    },
  }
</script>

<style scoped>
  .hot_tags_item{
    margin: 0 4px;
    font-size: 14px;
    padding: 3px 4px 3px 8px;
    line-height: 40px;
    cursor: pointer;
  }
  .hot_tags_item:hover{
    color: #938de0;
  }
  .col:hover{
    color: #938de0;
  }
  .active{
    color: #b6c0c4;
    border-radius: 10px;
    background-color: rgba(0,0,0,.05);
  }
  /*视频数据*/
  .video{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    /*这是歌单详情路由的父组件，此代码防止两个组件的滚动条冲突，*/
    overflow-y: hidden;
    padding-top: 20px;
  }
  .itemInfo{
    width: 21%;
    margin-bottom: 20px;
    position: relative;
  }
  .itemInfo img:nth-child(1){
    width: 100%;
    height: 135px;
    border-radius: 7px;
    cursor: pointer;
  }
  .itemInfo p{
    font-size: 14px;
    color: rgb(92, 81, 81);
    line-height: 20px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .playCount{
    position: absolute;
    top: 5px;
    right: 5%;
    display: flex;
    font-size: 12px;
    color: white;
  }
  .duration{
    position: absolute;
    right: 5%;
    top: 115px;
    font-size: 14px;
    color: #F4F4F4;
  }
  /*分类框样式*/
  /deep/.el-row{
    height: 400px;
    overflow-y: scroll;
  }
  /deep/.el-row::-webkit-scrollbar {
    display: none;
  }

</style>
